<template>
  <view class="message - box">
    <!-- 导航栏 -->
    <view class="nav - bar">
      <view class="back - icon" @click="goBack"></view>
      <view class="title"></view>
    </view>
	
    <!-- 操作按钮区 -->
<view class="anxiu">
      <button class="btn" @click="selectAll">全选</button>
      <button class="btn" @click="likeComment">点赞评论</button>
      <button class="btn" @click="deleteComment">删除评论</button>
	</view>
	<view class="wz4">'用户网名：xxxxxxxxxxxx'</view>
	<view class="wz4">'用户网名：xxxxxxxxxxxx'</view>
	<view class="wz4">'用户网名：xxxxxxxxxxxx'</view>
	<view class="wz4">'用户网名：xxxxxxxxxxxx'</view>
	<view class="wz4">'用户网名：xxxxxxxxxxxx'</view>
	<view class="wz4">'用户网名：xxxxxxxxxxxx'</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      comments: [
        { userName: '用户网名：xxxxxxxxxxxx' },
        { userName: '用户网名：xxxxxxxxxxxx' },
        // 可继续添加更多评论数据
      ]
    };
  },
  methods: {
    goBack() {
      uni.navigateBack({
        delta: 1
      });
    },
    selectAll() {
      // 这里可添加全选逻辑，比如给评论项添加选中标识等
      console.log('全选操作');
    },
    likeComment() {
      // 点赞逻辑，可更新评论点赞数等
      console.log('点赞评论操作');
    },
    deleteComment() {
      // 删除评论逻辑，可与后端交互删除指定评论
      console.log('删除评论操作');
    }
  }
};
</script>

<style>
	.wz4{
		background-color: #4cd964;
		font-size: 30rpx;
		color: black;
		border: 1rpx solid black;
		padding: 10rpx 20rpx;
		border-radius: 30rpx;
		margin-top: 40rpx;
		width: 600rpx;
		height: 80rpx;
		margin-left: 50rpx;
		align-content: center;
	}
	.bj{
		width: 700rpx;
		height:1000rpx;
		border: solid 1rpx black;
		border-radius: 35rpx;
		margin: auto;
		
		margin-top: 50rpx;
		
		
	}
	.anxiu{
		display: flex;
	}
.message - box {
  padding: 20rpx;
}
.nav - bar {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 60rpx;
  background-color: #4cd964;
  color: white;
}
.back - icon {
  position: absolute;
  left: 20rpx;
}
.title {
  font-size: 32rpx;
}
.operation - btns {
  display: flex;
 justify-content: center;
  margin-bottom: 20rpx;
}
.btn {
  background-color: #4cd964;
  font-size: 22rpx;
  color: black;
	border: 1rpx solid black;
/*  padding: 10rpx 20rpx; */
  border-radius: 5rpx;
  width: 100rpx;
  height: 50rpx;
  margin-left: 70rpx;
border-radius: 10rpx;
  margin-top: 50rpx;
  line-height: 50rpx;

}
.comment - list {
  border: 1rpx solid #ccc;
  padding: 10rpx;
}
.comment - item {
  margin-bottom: 15rpx;
  background-color: #4cd964;
  padding: 15rpx;
  border-radius: 8rpx;
}
.user - name {
  color: white;
}
</style>
